<template>
    <n-layout-sider
        bordered
        collapse-mode="width"
        :collapsed-width="64"
        :width="240"
        :collapsed="collapsed"
        show-trigger
        @collapse="collapsed = true"
        @expand="collapsed = false"
    >
        <n-menu
            :collapsed="collapsed"
            :collapsed-width="64"
            :collapsed-icon-size="22"
            :options="menuOptions"
        />
    </n-layout-sider>
</template>

<script setup lang='ts'>
import { h, onMounted, reactive, ref } from 'vue';
import { NIcon } from 'naive-ui'
import {
    PersonRound as PersonIcon, StarRound as StarIcon, AutoAwesomeRound as FocusIcon, CircleNotificationsRound as NotiIcon,
    AmpStoriesRound as ManageIcon, SupervisorAccountRound as AuthorIcon, AccountBalanceFilled as OrgIcon, BookFilled as BookIcon,
    ContactSupportRound as ContactIcon,
} from '@vicons/material'
import { LogoElectron as VenueIcon } from '@vicons/ionicons5'
import { RouterLink, useRouter } from 'vue-router';
import { userinfo } from '@/utils/userinfo'

var collapsed = ref(true)

// 引入路由
const router = useRouter()

onMounted(() => {
    init()
})

const init = (() => {
    setTimeout(() => {
        if (!userinfo.is_login) {
            router.push({ name: "Home" })
        }
        if (userinfo.is_admin) {
            menuOptions.push(manageOptions)
        }
    }, 300)
})

const renderIcon = ((icon: any) => {
    return () => h(NIcon, null, { default: () => h(icon) })
})

const menuOptions = reactive([
    {
        label: () =>
            h(
                RouterLink,
                {
                    to: {
                        name: 'UserInfo',
                    }
                },
                { default: () => '个人信息' }
            ),
        key: 'user-info',
        icon: renderIcon(PersonIcon)
    },
    {
        label: () =>
            h(
                RouterLink,
                {
                    to: {
                        name: 'NewsCenter',
                    }
                },
                { default: () => '消息中心' }
            ),
        key: 'my-noti',
        icon: renderIcon(NotiIcon)
    },
    {
        label: () =>
            h(
                RouterLink,
                {
                    to: {
                        name: 'MyPaper',
                    }
                },
                { default: () => '我的成果' }
            ),
        key: 'my-paper',
        icon: renderIcon(BookIcon)
    },
    {
        label: () =>
            h(
                RouterLink,
                {
                    to: {
                        name: 'StarPaper',
                    }
                },
                { default: () => '我的收藏' }
            ),
        key: 'star-paper',
        icon: renderIcon(StarIcon)
    },
    {
        label: '我的关注',
        key: 'my-focus',
        icon: renderIcon(FocusIcon),
        children: [
            {
                label: () =>
                    h(
                        RouterLink,
                        {
                            to: {
                                name: 'FocusAuthor',
                            }
                        },
                        { default: () => '关注的学者' }
                    ),
                key: 'focus-author',
                icon: renderIcon(AuthorIcon),
            },
            {
                label: () =>
                    h(
                        RouterLink,
                        {
                            to: {
                                name: 'FocusVenue',
                            }
                        },
                        { default: () => '关注的期刊/会议' }
                    ),
                key: 'focus-venue',
                icon: renderIcon(VenueIcon),
            },
            {
                label: () =>
                    h(
                        RouterLink,
                        {
                            to: {
                                name: 'FocusOrg',
                            }
                        },
                        { default: () => '关注的机构' }
                    ),
                key: 'focus-org',
                icon: renderIcon(OrgIcon),
            }
        ]
    },
    {
        label: () =>
            h(
                RouterLink,
                {
                    to: {
                        name: 'Contact',
                    }
                },
                { default: () => '联系我们' }
            ),
        key: 'contact-us',
        icon: renderIcon(ContactIcon)
    },
])

const manageOptions = {
    label: () =>
        h(
            RouterLink,
            {
                to: {
                    name: 'ManageCenter',
                }
            },
            { default: () => '管理中心' }
        ),
    key: 'manage-info',
    icon: renderIcon(ManageIcon),
}

</script>

<style scoped>
</style>